<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>个人主页</title>
    <style>
        body{
            margin: 0;
        }
        #top{
            width: 100%;
            height: 50px;
            background-color: cyan;
            font-size: 30px;
            font-family: 楷体;
            text-align: center;
            position: fixed;
            left: 0;
            top:0;

        }
        #banner{
            margin-top: 50px;
        }
        #pic{
            width: 100%;
            height: 100px;
        }
        #nav{
            height: 2650px;
            width: 1000px;
            margin: 0 auto;
        }
        .rect{
            margin-top: 0;
            font-family: 楷体;
        }
        .text{
            font-family: 楷体;
            text-indent: 2em;
        }
        #frist{
            height: 300px;
            width: 300px;
        }
        #second{
            height: 300px;
            width: 690px;
        }
        #trid{
            width: 995px;
            height: 200px;
        }
        #forth{
            width: 500px;
            height: 300px;
        }
        #fivth{
            width: 490px;
            height: 300px;
        }
        #sixth{
            width: 500px;
            height: 300px;
        }
        #senth{
            width: 490px;
            height: 300px;
        }
        #school{
            width: 1000px;
            margin: 0 auto;
        }
        #box{
            border: 1px solid black;
            border-collapse: collapse;
            width: 1000px;
        }
        td{
            border: 1px solid black; 
            border-collapse: collapse;
            height: 22px;
        }
        #tab{
            margin: 0 auto;
        }
        #dingwei{
            background-image: url(lunhua.jpg);
            height: 800px;
            width: 1000px;
            position: relative;
            z-index: -2;
        }
        .dog{
            border-radius: 50%;
        }
        #dog1{
            height: 150px;
            position: absolute;
            left: 0;
            top: 0;
        }
        #dog2{
            height: 200px;
            position: absolute;
            left: 0;
            bottom: 0;
        }
        #dog3{
           height: 150px;
           position: absolute;
           top: 0;
           right: 150px;
        }
        #dog4{
            height: 300px;
            position: absolute;
            bottom: 0;
            right: 0;
        }
        #dog5{
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translateX(-50%) translateY(-50%);
        }
        a{
            text-decoration: none;
        }
        #anniu{
            background-color: palevioletred;
            font-size: 20px;
        }
        
        #bottom{
            width: 100%;
            height: 300px;
        }
        #left1{
            position: fixed;
            left: 40px;
            top: 100px;
            height: 100px;
        }
         #left2{
            position: fixed;
            left: 200px;
            top:400px;
            height: 100px;
        }
         #left3{
            position: fixed;
            left: 40px;
            top: 860px;
            height: 100px;
        }
    </style>
</head>
<body>
    <div id="top">
      <a href="#s">我的学校</a>
      <a href="#j">我的家乡</a>
      <a href="#xinxi">个人信息</a>
      <a href="#tongxue">我的同学</a>  
   </div>
   <div id="banner">
       <img src="bg4.jpg" id="pic">
   </div>
   <div id="nav">
        <div>
            <h1 class="rect" id="s">我的学校</h1>
            <p class="text">黄河科技学院位于河南郑州。学校创立于1984年10月；1994年2月，经国家教育委员会批准建立民办黄河科技学院，实施高等专科学历教育；2000年3月，经国家教育部批准，在民办专科层次的基础上建立新的本科层次的黄河科技学院；2004年取得学士授予权；2008年通过国家教育部普通本科教学工作水平评估；2013年被教育部批准为“应用科技大学改革试点战略研究单位”。并成为中国应用技术大学联盟的首批成员和河南省首批转型发展试点高校；2014年学校获高等教育国家级教学成果二等奖。2015年，学校“黄河众创空间”被科技部认定为全国首批众创空间，学校获批“河南省大学生创业示范基地”“河南省首批示范性应用技术类型本科院校”。2016年，学校荣登首批“全国高校创新创业工作50强"榜单，学校大学科技园被认定为国家级科技企业孵化器，学校获批“河南省创业孵化示范基地”“河南省省普通大中专毕业生就业创业工作先进单位”。2017年，学校创业园获批“全国大学生创业示范园”，学校获批“河南省首批高校双创基地”。学校的发展史就是一部敢为天下先的创新创业史，曾两次被美国弗吉尼亚大学商学院写进教学案例，并被《人民日报》《华盛顿邮报》等中外著名媒体多次报道。 截至2017年4月，学校在郑州市有两个校区，在济源市建有一个校区，总占地2800多亩，校舍建筑面积100多万平方米，教学科研仪器设备价值2.4亿元，馆藏图书300万册；有全日制在校生30000余人。</p>
            <div id="school">
                <img src="school.jpg"  id="frist">
                <img src="school1.jpg" id="second">
                <img src="school2.jpg" id="trid">
            </div>
        </div>
        <hr>
        <div>
            <h1 class="rect" id="j">我的家乡</h1>
            <p class="text">
                辉县市地处豫晋接壤地区，北依太行，南眺黄河。总面积2007平方公里，人口84万 ，辖20个乡镇，2个办事处，536个行政村。 是全国首批新农保试点县、科技进步先进县、文化先进县和“中国绿色名县”； 河南省城镇化发展重点县、经济扩权县、对外开放重点县和知识产权试点县，县域经济综合实力位列中部六省百强县第28位。
            </p>
            <div>
                <img src="2.jpeg" alt="" id="forth">
                <img src="3.jpg" alt="" id="fivth">
                <img src="4.png" alt="" id="sixth">
                <img src="huixian.jpg" alt="" id="senth">
            </div>
            <hr>
            <div id="tab">
                <h1 class="rect" id="xinxi">个人信息</h1>
                <table id="box" class="rect">
                    <tr>
                        <td>姓名</td>
                        <td>性别</td>
                        <td>民族</td>
                        <td>血型</td>
                        <td>联系方式</td>
                    </tr>
                    <tr>
                      <td>娄通勉</td>
                      <td>男</td>
                      <td>汉族</td>
                      <td>AB</td>
                      <td>666666888</td>             
                    </tr>
                    <tr>
                        <td colspan="5">阿杜阿道夫高达法国队阿道夫噶豆腐干豆腐干的分工阿杜阿道夫高达法国队阿道夫噶豆腐干豆腐干的分工阿杜阿道夫高达法国队阿道夫噶豆腐干豆腐干的分工阿杜阿道夫高达法国队阿道夫噶豆腐干豆腐干的分工阿杜阿道夫高达法国队阿道夫噶豆腐干豆腐干的分工阿杜阿道夫高达法国队阿道夫噶豆腐干豆腐干的分工阿杜阿道夫高达法国队阿道夫噶豆腐干豆腐干的分工阿杜阿道夫高达法国队阿道夫噶豆腐干豆腐干的分工阿杜阿道夫高达法国队阿道夫噶豆腐干豆腐干的分工阿杜阿道夫高达法国队阿道夫噶豆腐干豆腐干的分工阿杜阿道夫高达法国队阿道夫噶豆腐干豆腐干的分工阿杜阿道夫高达法国队阿道夫噶豆腐干豆腐干的分工阿杜阿道夫高达法国队阿道夫噶豆腐干豆腐干的分工</td>
                    </tr>
                </table>
            </div>
            <hr>
        </div>
        <div>
            <h1 class="rect" id="tongxue">我的同学</h1>
            <div id="dingwei">
                <img src="1.jpg" class="dog" id="dog1">
                <img src="2.jpg" class="dog" id="dog2">
                <img src="5.jpg" class="dog" id="dog3">
                <img src="6.jpg" class="dog" id="dog4">
                <img src="school.jpg" class="dog" id="dog5">
            </div>
        </div>
        <hr>
        
   </div>
        <div>
           <img src="damen.png"  id="bottom">
        </div>
        <div >
            <a href="#"><img src="left.gif" id="left1"></a>
            
        </div>
        <div >
            <a href="#"><img src="left.gif" id="left2"></a>
            
        </div>
        <div >
            <a href="#"><img src="left.gif" id="left3"></a>
            
        </div>
      
            
        
</body>
</html>